<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons')
import resize from './mixins/resize'
import { getToken } from '@/utils/auth'
import { getPredictStation } from '@/api/charts'
import { format2Date } from '@/utils'
import send from '@/utils/send'
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      chart: null,
      listQuery: {
        token: undefined,
        date: format2Date(new Date(), 'yyyy-MM-dd'),
        // month: new Date().getMonth() + 1,
        // day: new Date().getDate(),
        // weekday: new Date().getDay(),
        station: '1'
      },
      timer: null,
      send: '',
      // sendStation: '',
      label: ['0:10', '0:20', '0:30', '0:40', '0:50', '0:60', '1:10', '1:20', '1:30', '1:40', '1:50', '1:60', '2:10',
        '2:20', '2:30', '2:40', '2:50', '2:60', '3:10', '3:20', '3:30', '3:40', '3:50', '3:60', '4:10', '4:20',
        '4:30', '4:40', '4:50', '4:60', '5:10', '5:20', '5:30', '5:40', '5:50', '5:60', '6:10', '6:20', '6:30',
        '6:40', '6:50', '6:60', '7:10', '7:20', '7:30', '7:40', '7:50', '7:60', '8:10', '8:20', '8:30', '8:40',
        '8:50', '8:60', '9:10', '9:20', '9:30', '9:40', '9:50', '9:60', '10:10', '10:20', '10:30', '10:40',
        '10:50', '10:60', '11:10', '11:20', '11:30', '11:40', '11:50', '11:60', '12:10', '12:20', '12:30',
        '12:40', '12:50', '12:60', '13:10', '13:20', '13:30', '13:40', '13:50', '13:60', '14:10', '14:20',
        '14:30', '14:40', '14:50', '14:60', '15:10', '15:20', '15:30', '15:40', '15:50', '15:60', '16:10',
        '16:20', '16:30', '16:40', '16:50', '16:60', '17:10', '17:20', '17:30', '17:40', '17:50', '17:60',
        '18:10', '18:20', '18:30', '18:40', '18:50', '18:60', '19:10', '19:20', '19:30', '19:40', '19:50',
        '19:60', '20:10', '20:20', '20:30', '20:40', '20:50', '20:60', '21:10', '21:20', '21:30', '21:40',
        '21:50', '21:60', '22:10', '22:20', '22:30', '22:40', '22:50', '22:60', '23:10', '23:20', '23:30',
        '23:40', '23:50', '23:60']
    }
  },
  watch: {
    send: function(newTest, oldTest) {
      this.listQuery = JSON.parse(JSON.stringify(this.send))
      this.initChart()
    }
    // sendStation: function(newTest, oldTest) {
    //   if (newTest !== oldTest) {
    //     this.listQuery.station = JSON.parse(JSON.stringify(this.send))
    //     this.initChart()
    //   }
    // }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
    send.$on('sendPredict', (sendData) => {
      this.send = sendData
    })
    // send.$on('sendPredictStation', (sendData) => {
    //   this.sendStation = sendData
    // })
    this.timer = setInterval(() => {
      setTimeout(this.initChart, 0)
    }, 1000 * 60 * 10)
  },
  created() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
    clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      // const datetime = new Date()
      this.listQuery.token = getToken()
      // this.listQuery.month = datetime.getMonth() + 1
      // this.listQuery.day = datetime.getDate()
      // this.listQuery.weekday = datetime.getDay()
      getPredictStation(this.listQuery).then(response => {
        this.chart.setOption({
          title: {
            text: this.listQuery.station + '号站点未来二十四小时内客流量预测',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['进站人数', '出站人数'],
            left: 'left'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            name: '时间段',
            boundaryGap: false,
            data: this.label
          },
          yAxis: {
            type: 'value',
            name: '预计人数'
          },
          series: [
            {
              name: '进站人数',
              type: 'line',
              stack: '总量',
              data: response.in_list
            },
            {
              name: '出站人数',
              type: 'line',
              stack: '总量',
              data: response.out_list
            }
          ]
        })
      })
    }
  }
}
</script>

